<template>
    <layout-default
            name="login"
            bg="white"
            :loaded="true">
        <div class="login-wrap">
            <div class="w-title">
                <span>账号登录</span>
            </div>
            <div class="w-form">
                <div class="f-input">
                    <div class="i-item">
                        <input type="text" placeholder="请输入账号" v-model="form.account">
                    </div>
                    <div class="i-item">
                        <input type="password" placeholder="请输入密码" v-model="form.password">
                    </div>
                </div>
                <div class="f-btn" @click="toLogin">
                    <span>登录</span>
                </div>
            </div>
            <div class="w-service">
                <div class="s-left">
                    <span>没有账号？</span>
                    <span>注册</span>
                </div>
                <div class="s-right">
                    <span>忘记密码</span>
                </div>
            </div>
            <div class="w-third">
                <div class="t-title">
                    <span>第三方账号登录：</span>
                </div>
                <div class="t-entry">
                    <div class="e-item" style="color:#FF8200;">
                        <i class="iconfont icon-weibo"></i>
                    </div>
                    <div class="e-item" style="color:#07c160;">
                        <i class="iconfont icon-weixin"></i>
                    </div>
                    <div class="e-item">
                        <i class="iconfont icon-github"></i>
                    </div>
                </div>
            </div>
        </div>

    </layout-default>
</template>

<script>
    import session from '@/libs/session'
    import { mapActions } from 'vuex'

    export default {
        data () {
            return {
                form: {
                    account: '',
                    password: ''
                }
            }
        },
        methods: {
            ...mapActions('user', ['profile']),
            async toLogin() {
                const resp = await this.$api.user.login(this.form)
                if (resp.done) {
                    session.set(resp.data)
                    this.profile()
                    this.rep('/')
                } else {
                    this.$toast.fail('登录失败')
                }
            }
        }
    }
</script>

<style lang="less">
    .login{
        .login-wrap{
            width:540px;
            margin:200px auto 0 auto;
            .w-title{
                padding-bottom: 40px;
                span{
                    font-size: 36px;
                    font-weight: 600;
                }
            }
            .w-form{
                .f-input{
                    .i-item{
                        display: flex;
                        align-items: center;
                        height: 80px;
                        padding: 0 30px;
                        background: #f7f7f7;
                        input{
                            flex:1;
                            border:none;
                            outline: none;
                            background: #f7f7f7;
                        }
                        &:not(:first-child){
                            margin-top: 20px;
                        }
                    }
                }
                .f-btn{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 80px;
                    margin-top: 20px;
                    background: #007fff;
                    span{
                        color:white;
                    }
                }
            }
            .w-service{
                display: flex;
                justify-content: space-between;
                padding: 20px 0 40px 0;
                font-size: 28px;
                color:#71777c;
                .s-left{
                    span{
                        &:last-child{
                            color:#007fff;
                        }
                    }
                }
                .s-right{
                    span{
                        color:#007fff;
                    }
                }
            }
            .w-third{
                .t-title{
                    span{
                        color:#71777c;
                    }
                }
                .t-entry{
                    display: flex;
                    justify-content: space-around;
                    padding-top: 40px;
                    .e-item{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width:90px;
                        height: 90px;
                        border-radius: 45px;
                        background: #f7f7f7;
                        i{
                            font-size: 60px;
                        }
                    }
                }
            }
        }
    }
</style>